<template>
  <ModuleTitle title="最受欢迎项目Top排名">
    <div class="w-full h-full mt-10px" >
      <!-- :autoplay="{ delay: 2500, disableOnInteraction: false }" -->
      <swiper
        ref="swiperRef"
        :modules="modules"
        :direction="'vertical'"
        :slides-per-view="'auto'"
        :space-between="10"
        :autoplay="{ delay: 2500, disableOnInteraction: false }"
        :loop="false"
        class="swiper-container overflow-hidden">
        <swiper-slide
          v-for="(item, index) in projects"
          :key="index"
          class="w-full flex! items-center  pr-8px h-18%!"
          :class="index % 2 === 0 ? 'bg-[rgba(255,255,255,0.05)]' : ''">
          <div class="w-full flex items-center text-white">
            <div class="w-13%">
              <div class="col-rank  flex-inline justify-center items-center pl-1 pr-2 py-0.5 rounded-l-3px ml-6px" :class="index <= 2 ? 'bg-[#EDA54E]' : 'bg-[#66BAF8]'">
                <span class="text-xs">No.{{ index + 1 }}</span>
              </div>
            </div>
            
            <span class="col-project w-27% text-center">{{ item.name }}</span>
            <span class="col-quantity w-15% text-center">{{ item.quantity }}万</span>
            <div class="col-progress w-45% text-center">
              <a-progress size="large" color="#87F7C7" track-color="#386479" :percent="item.percentage" />
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </ModuleTitle>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay } from 'swiper/modules'
import 'swiper/css'
import ModuleTitle from './ModuleTitle.vue'

import { useAutoRefresh } from '@/hooks/useAutoRefresh'

useAutoRefresh(fetchData)
const modules = [Autoplay]
// 计算容器高度
const projects = [
  { name: '项目 A', quantity: 300, percentage: 80 / 100 },
  { name: '项目 B', quantity: 250, percentage: 65 / 100 },
  { name: '项目 C', quantity: 200, percentage: 50 / 100 },
  { name: '项目 D', quantity: 150, percentage: 35 / 100 },
  { name: '项目 E', quantity: 100, percentage: 20 / 100 },
  { name: '项目 F', quantity: 50, percentage: 10 / 100 },
  { name: '项目 G', quantity: 150, percentage: 35 / 100 },
  { name: '项目 H', quantity: 100, percentage: 20 / 100 },
  { name: '项目 I', quantity: 50, percentage: 10 / 100 }
  // 可按需添加更多项目
]
const swiperRef = ref(null)


// 组件自己的数据获取方法
function fetchData() {
  console.log('执行组件数据刷新')
  // 这里调用API获取数据
}

</script>
<style>
.arco-progress-line-text {
  color: #fff;
}
.swiper-container {
  height: calc(100% - 20px)
}
.col-rank {
  clip-path: polygon(0% 0%, 80% 0, 100% 50%, 80% 100%, 0% 100%);
}
</style>
